<template>
 <div class="bg-grey pb-60 ">
    <!--面包屑开始-->
    <div class="archive-header pt-20 wow fadeInUp animated">
      <div class="container">
          <h2 class="font-weight-900">标签</h2>
          <div class="breadcrumb">
              <a href="index.html" rel="nofollow">标签</a>
              <span rel="nofollow">{{tagName}}</span> 
          </div>
          <div class="bt-1 border-color-1 mt-30 mb-50"></div>
      </div>
    </div>
    <div class="container">
      <div class="loop-list loop-list-style-1">
                <div class="row">
                    <article class="col-md-4 mb-30 wow fadeInUp  animated" v-for="(item,index) in tagArticles" :key="item.id">
                        <div class="post-card-1 border-radius-10 hover-up">
                        <div class="post-thumb thumb-overlay img-hover-slide position-relative bg-image" :style="`background-image: url(${item.articleCover})`">
                            <router-link class="img-link" :to="`/article/${item.id}`"></router-link>
                        </div>
                            <div class="post-content p-30">
                                <div class="entry-meta meta-0 font-small mb-10">
                                    <router-link :to="{ name: 'tagDetails', params: { tagId: tag.id, tagName: tag.tagName } }" v-for="(tag,index) in item.tagVOList" :key="tag.id"><span class="post-cat text-info">{{tag.tagName}}</span></router-link>
                                </div>
                                <div class="d-flex post-card-content">
                                    <h5 class="post-title mb-20 font-weight-900">
                                        <router-link :to="`/article/${item.id}`" >{{item.articleTitle}}</router-link>
                                    </h5>
                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                        <span class="post-on">{{item.createTime}}</span>
                                        <span class="time-reading has-dot"><router-link :to="{name: 'categoryDetails', params:{categoryId:item.category.id, categoryName:item.category.categoryName} }">{{item.category.categoryName}}</router-link></span>
                                        <span class="post-by has-dot">{{item.articleViews}}次浏览</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
      </div>
      <div class="">
        <el-pagination
          align="center" 
          background
          layout="prev, pager, next"
          :total="total" 
          :current-page="current"
          :page-size="size"
          @current-change="getTagArticleList"
          :hide-on-single-page="true"
          style="width:100%">
        </el-pagination>
      </div>
    </div>
    <div >
      <!-- <div class="container"> -->
        <!-- <v-md-editor :value="markdown" mode="preview"></v-md-editor> -->
         <!-- <v-md-preview :text="markdown"></v-md-preview> -->
      <!-- </div> -->
      
    </div>
        
 </div>

</template>

<script>
export default {
  name:'tagDetail',
  mounted() {
    const tagId = this.$route.params.tagId;
    const tagName = this.$route.params.tagName;
    this.tagId = tagId;
    this.tagName = tagName;
    this.getTagArticleList(tagId);
    this.test();
  },
  data() {
    return {
        markdown:'',
        tagId:1,
        tagName:"",
        tagArticles:[],
        current: 1,
        size:6,
        total:0
    }
  },
  methods:{
    async getTagArticleList(tagId){
        console.log('tagID',tagId)
        const res = await this.$API.tag.getTagArticleList(this.current, this.size, tagId);
        if(res.code == 200)
        {
            this.tagArticles = res.data.articleConditionVOList;
        }
        else
        {
            this.$message({
                type:'error',
                message:'获取标签文章失败！'
            })
        }
    },
    async test(){
     const res =  await this.$API.article.getEditArticleInfo(75)
     if(res.code == 200)
     {
        this.markdown = res.data.articleContent;
     }
    }
  }


}
</script>

<style lang="css">
 .post-thumb {
    overflow: hidden;
    position: relative;
  }

  .post-thumb img {
    transition: transform 0.3s ease;
  }

  .post-thumb:hover img {
    transform: scale(1.1); /* Adjust the scale factor as needed */
  }



/* pre {
    overflow: hidden !important;
} */

pre::before {
    content: "";
    position: absolute;
    background: rgb(53, 205, 75);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 10px;
    left:119px;
    transform: translate(-50%);
}

pre code {
    display: inline-block;
    padding-bottom: 20px;
    position: relative;
    top: 20px;
}

pre code::before {
    content: "";
    position: absolute;
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -30px;
    left: 10px;
    transform: translate(-50%);
}

pre code::after {
    content: "";
    position: absolute;
    background: sandybrown;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -30px;
    left: 28px;
    transform: translate(-50%);
}

.vuepress-markdown-body div[class*=v-md-pre-wrapper-].line-numbers-mode:after{
  background-color: rgb(15, 14, 14);
}

@media (max-width: 419px) {
  .vuepress-markdown-body div[class*="v-md-pre-wrapper-"] {
    margin: .85rem -1.5rem;
    border-radius: 8px;
  }
}

</style>